終於要動手嘗試寫程式了！我們平常在使用的 App 裡經常出現的文字、按鈕、圖片等元素，其實都是由一些基礎的 UI 元件組成的。今天，我們就一起來摸索這些常用的 UI 元件，看看怎麼把它們運用在程式裡。試著一步步操作，慢慢搞懂這些元件是怎麼運作的，一起來試試看吧！

Text

先從最簡單的開始 - Text 。這是 SwiftUI 中用來顯示文字的基本元件。平常在 App 裡看到的各種文字，其實都可以透過 Text 來實作。我們可以修改 Text 的屬性來改變文字的外觀和排版，例如字體、顏色、字重等。接下來，試著寫下這段程式碼：

Text("Hello, world!")
    .font(.largeTitle)
    .foregroundColor(.blue)
    .padding()

這些程式是什麼意思呢？讓我們一行一行來看吧：
首先，Text 括號中間放的就是我們要顯示的文字。而後面的 .font、.foregroundColor 和 .padding，都是用來指定這段文字的屬性。

• .font：字型大小。
• .foregroundColor：文字顏色。
• .padding：文字的內距，讓文字四周留出空間，看起來更舒適。

當我們執行這段程式時，會看到一段藍色的大字體文字「Hello, world!」，而且文字四周還有內邊距。這樣就能夠讓我們很輕鬆地調整文字的樣式。

參考資料：Text | Apple Developer Documentation

Image

接下來，我們來看看 Image ，它是用來顯示圖片的。SwiftUI 提供了多種方式來載入圖片，你可以從資源檔案載入，也可以使用內建的 SF Symbols 圖案。

Image(systemName: "star.fill")
    .foregroundColor(.yellow)
    .imageScale(.large)

讓我們來拆解一下這些程式的意思：

• Image(systemName: "star.fill")：用的是 SF Symbols 中的內建圖案，systemName 讓我們可以輕鬆地使用這些圖案。
• .foregroundColor(.yellow) ：用來設定圖案的顏色。
• .imageScale(.large)：調整圖案的大小。

這段程式會顯示一個黃色的星形圖示。看起來挺簡單的吧？透過 Image 元件，我們可以輕鬆地在畫面中加入各種圖片元素。

參考資料：Image | Apple Developer Documentation

Button

每個 App 裡幾乎都會有按鈕，我們用 SwiftUI 來試做一個按鈕吧！Button 是用來觸發動作或事件的互動式元件，我們可以自訂按鈕的外觀以及按下按鈕後的行為。

Button(action: {
    print("Button was tapped!")
}) {
    Text("Tap me!")
        .padding()
        .background(Color.green)
        .foregroundColor(.white)
        .cornerRadius(10)
}

這裡我們用到剛剛練習的 Text 來顯示按鈕上的文字，然後用 .padding() 增加按鈕的內距。

• .background(Color.green)：設定按鈕的背景顏色。
• .foregroundColor(.white)：改變文字的顏色。
• .cornerRadius(10)：讓按鈕的四角變得圓潤。

這段程式會建立一個帶有綠色背景和圓角的按鈕，當我們按下它時，會在控制台中看到「Button was tapped!」的訊息。

參考資料：Button | Apple Developer Documentation

VStack 和 HStack

排版一直是 UI 開發中的重要部分，在 SwiftUI 裡，我們可以使用 VStack 和 HStack 來垂直或水平排列其他 UI 元件。

VStack

VStack 是用來垂直排列元件的容器，讓我們來看看它的用法。

VStack(alignment: .leading) {
    Text("Welcome")
        .font(.title)
    Text("to SwiftUI")
        .font(.subheadline)
}

• VStack：用來垂直排列元件的容器。
• .alignment：.leading 讓文字左對齊。
• .font(.title) 和 .font(.subheadline)：分別設定了不同的字型大小。

這段程式會將「Welcome」和「to SwiftUI」這兩段文字垂直排列，且文字左對齊。

參考資料：VStack | Apple Developer Documentation

HStack

HStack 則是用來水平排列元件的，讓我們把剛剛 VStack 的程式改成 HStack 看看會發生什麼事吧！

HStack {
    Text("Welcome")
        .font(.title)
    Text("to SwiftUI")
        .font(.subheadline)
}

這段程式會將「Welcome」和「to SwiftUI」這兩段文字水平排列在一起。HStack 讓我們能夠輕鬆地在同一行內顯示多個元件。

參考資料：HStack | Apple Developer Documentation

Spacer

在 UI 設計中，有時候需要一些空間來讓元件之間保持距離。這時候，我們可以用 Spacer 來幫忙。一樣用剛剛練習 HStack 的程式來改寫：

HStack {
  Text("Welcome")
    .font(.title)
  Spacer()
  Text("to SwiftUI")
      .font(.subheadline)
}

這段程式會將「Welcome」和「to SwiftUI」這兩段文字分別排列在螢幕的左邊和右邊，中間的空間由 Spacer 填充。Spacer 會自動擴展來填滿空間，這樣就能輕鬆地讓兩個文字元件保持距離，讓畫面更整齊。

參考資料：利用 SwiftUI 的 Spacer & padding 調整元件位置

ZStack

最後來看看 ZStack，這個元件可以將多個 UI 元件堆疊在一起。這在需要重疊顯示多個元素時特別有用。

ZStack {
    Image(systemName: "star.fill")
        .resizable()
        .scaledToFit()
        .foregroundColor(.yellow)
    Text("Star")
        .font(.caption)
        .foregroundColor(.black)
}

• ZStack：用來堆疊元件的容器。
• .resizable()：讓圖片可以自由調整大小。
• .scaledToFit()：確保圖片按比例縮放到適合的大小。

這段程式碼會將一個黃色的星形圖案和一段「Star」文字重疊顯示，文字位於圖案的中央。

參考資料：利用 ZStack，overlay & background 堆疊 SwiftUI 畫面

總結

今天，我們一起探索了 SwiftUI 中的一些常用 UI 元件，這些元件是構建各種介面的基礎。而 SwiftUI 這種宣告式的寫法不會讓我們太難學習。隨著我們的學習進展，未來的挑戰會變得更加有趣和具有挑戰性。明天我們再繼續探索更多 SwiftUI 的技巧吧！

參考資料：Day 4: 初探 SwiftUI 基本 UI 元件的使用